<!--
 * @Author: your name
 * @Date: 2021-03-31 20:39:00
 * @LastEditTime: 2021-04-14 15:12:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web\node\views\back\reset_pwd.html
-->
<!-- 继承base基础模板 -->
{%  extends "back/base.html" %}

<!-- 留槽 样式 -->
{% block style %}
{% endblock %}

 <!-- 留槽 主要内容 -->
{% block body %}
<div class="container-fluid">
    <!-- 修改密码 -->
    <div class="body">
        <div class="repass">
            <form id="change_pwd_form" action="http://localhost:3000/back/user/api/change_pwd" method="post" class="form-horizontal col-md-offset-2">
                <div class="form-group">
                    <label for="" class="col-md-3 control-label">原密码</label>
                    <div class="col-md-4">
                        <input id="old_pwd" name="old_pwd" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-3 control-label">新密码</label>
                    <div class="col-md-4">
                        <input id="new_pwd" name="new_pwd" type="password" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-md-3 control-label">确认密码</label>
                    <div class="col-md-4">
                        <input id="re_pwd" name="re_pwd" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-7">
                        <input type="submit" class="btn btn-success btn-danger  pull-right" value="修 改">
                        <a href="/back/u_set" class="btn btn-success btn-warning pull-right"  style="margin-right: 10px;">返 回</a>

                    </div>                          
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

   <!-- 留槽 脚本 -->
{% block script %}
    <script src="js/md5.js"></script>
    <script>
        $(function(){
            $("#change_pwd_form").on("submit",function(){

                //验证两次新的密码是否一样
                let old_pwd = $("#old_pwd").val();
                let new_pwd = $("#new_pwd").val();
                let re_pwd = $("#re_pwd").val();

                if(new_pwd !== re_pwd){
                    alert("两次新密码不一致，请重新输入！")
                    $("#old_pwd").val('');
                    $("#new_pwd").val('');
                    $("#re_pwd").val('');
                    return false;
                }
                
                const S_KEY = "@^xrt%sf?q~xv24XdCIE"
                let md5_old_pwd = md5(old_pwd + S_KEY);
                let md5_new_pwd = md5(new_pwd + S_KEY);
                let token = localStorage.getItem("token");

                // 4. 发起post请求
                $.ajax({
                    url: $(this).attr('action'),
                    type: $(this).attr('method'),
                    data: `token=${token}&old_pwd=${md5_old_pwd}&new_pwd=${md5_new_pwd}`,
                    success: function (data) {
                        if(data.satatus === 200){
                            alert('密码修改成功!');
                            //  5.退出登录, 重新登录
                            $.get('http://localhost:3000/back/user/api/logout', function (data) {
                                console.log(data);
                                if(data.status === 200){
                                    // 删除本地的数据
                                    localStorage.removeItem('token');
                                    // 回到登录界面
                                    window.location.href = '/back/login';
                                }
                            })
                        }else {
                            alert('密码修改失败!');
                        }
                    }
                });
                
                return false;
            })
        })
    </script>

{% endblock %}


